<template>
  <div class="adress-model">
    <van-popup
        v-model="addressShow"
        position="bottom"
        :style="{ height: '60%' }">
      <div class="top_nav">
        <a v-if="addressIdList.length > 0" href="javascript:;" @click="returnAddress"><van-icon name="arrow-left" />返回</a>
        <a v-else href="javascript:;" @click="addressShow = false">关闭</a>
        <span>选择地址</span>
        <a href="javascript:;" @click="defineAddress">确定</a>
      </div>
      <div class="address_list">
        <van-cell v-for="item in addressList" :key="item.code" :value="item.name" @click="getAddress(item.id, item.name)" />
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'adress-model',
  components: {},
  data () {
    return {
      addressShow: false,
      addressList: [],
      addressIdList: [],
      address: ''
    }
  },
  props: {},
  watch: {},
  methods: {
    init () {
      this.getAddress()
      this.addressShow = true
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/19 0019 10:39
     *@function  选择第地区返回上一级
     *****************************************/
    returnAddress () {
      this.addressIdList.pop()
      this.addressNameList.pop()
      if (this.addressIdList.length === 0) {
        this.getAddress()
      } else {
        this.getAddress(this.addressIdList[this.addressIdList.length - 1])
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/19 0019 11:31
     *@function 选择地址确定
     *****************************************/
    defineAddress () {
      this.address = ''
      this.addressNameList.forEach(item => {
        this.address = this.address + ' ' + item
        this.$emit('refreshDataList', {
          address: this.address,
          region_id: this.addressIdList[this.addressIdList.length - 1]
        })
        this.addressShow = false
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/18 0018 15:01
     *@function  获取地址
     *****************************************/
    getAddress (id, name) {
      document.getElementsByName('address_list').scrollTop = 0
      if (id) {
        if (id && name) {
          this.addressIdList.push(id)
          this.addressNameList.push(name)
        }
        this.$jsonp(`${window.SITE_CONFIG['subsidyURL']}/index.php?s=apiv&c=api&m=get_City&isApp=1&city_id=${id}`).then(json => {
          if (json.data.length === 0) {
            this.addressShow = false
            this.defineAddress()
          }
          this.addressList = json.data
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.addressNameList = []
        this.addressIdList = []
        this.$jsonp(`${window.SITE_CONFIG['subsidyURL']}/index.php?s=apiv&c=api&m=get_City&isApp=1`).then(json => {
          this.addressList = json.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .adress-model {
    .top_nav{
      display: flex;
      justify-content: space-between;
      height: 80px;
      align-items: center;
      border-bottom: 2px solid #efefef;
      a{
        font-size: 28px;
        color: #1f93fd;
        padding: 15px;
        display: flex;
        align-items: center;
        width: 120px;
        justify-content: center;
      }
      span{
        font-size: 28px;
      }
    }
    .address_list{
      height: calc(100% - 80px);
      overflow: auto;
    }
  }
</style>
